<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城 - 小米9 Pro、Redmi K30、小米MIX Alpha，小米电视官方网站</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul.head {
				width: 100%;
				height: 40px;
				/* 上下100左右居中 */
				margin: 0 auto;
				/* 去掉小圆点*/
				list-style-type: none;
				border: 1px solid #333333;
				background-color: #333333;
			}

			ul.span {
				width: 90%;
				height: 55px;
				margin: 0 auto;
				/* 去掉小圆点*/
				list-style-type: none;
				padding: 26px, 10px, 38px;
				color: #000000;



			}

			.red {
				background-color: red;
			}

			li {
				float: left;
				width: 100px;
				height: 40px;
				text-align: center;
				/* line-height是行高，让line-height的值和height的值一致，就能实现垂直居中 */
				line-height: 40px;
			}

			li.mid {
				float: left;
				width: 110px;
				height: 40px;
				text-align: center;
				/* line-height是行高，让line-height的值和height的值一致，就能实现垂直居中 */
				line-height: 40px;

			}

			li.long {
				width: 150px;

			}

			li.right {
				float: right;
				width: 110px;
				height: 40px;
				text-align: center;
				/* line-height是行高，让line-height的值和height的值一致，就能实现垂直居中 */
				line-height: 40px;
			}

			span {
				text-align: center;
				display: block;
				height: 17.6px;
				font-size: 16px;
				color: #000000;
				list-style-type: none;
				background-color: white;
				margin: 10px;
				padding: 26px, 10px, 38px;

			}

			a {
				display: block;
				width: 120px;
				height: 40px;

			}

			a.float-left {
				text-decoration: none;

				color: black;
			}

			a:link,
			a:visited {
				text-decoration: none;

				color: white;
			}

			a:hover {
				background-color: rgb(128, 0, 128);
				color: yellow;
				/* 字体变成粗体 */
				font-weight: bold;
				position: relative;
				top: -2px;
				right: -2px;
			}

			a:active {
				color: blue;
			}

			.float-right {
				float: right;
				width: 366px;
				height: 50px;


			}

			.float-left {
				float: left;
				margin-right:0;
				
			}


			.search-btn {
				float: right;
				right: 0;
				z-index: 2;
				width: 52px;
				height: 50px;
				font-size: 24px;
				line-height: 24px;
				background: #fff;
				color: #616161;
			}

			.iconfont {
				font-family: iconfont !important;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: .2px;
				-moz-osx-font-smoothing: grayscale;
			}

			div {
				align-items: center;
			}
		</style>

	</head>
	<body>
		<div>
			<img src="img/head.jpg" width=100% height="120px" style="float: clear;" />
		</div>
		<ul class="head">
			<li><a href="#1">小米商城</a></li>
			<li><a href="#1">MIUI</a></li>
			<li><a href="#1">loT</a></li>
			<li><a href="#1">云服务</a></li>
			<li><a href="#1">金融</a></li>
			<li><a href="#1">有品</a></li>
			<li class="mid"><a href="#1">小爱开放平台</a></li>
			<li><a href="#1">企业团购</a></li>
			<li><a href="#1">资质证照</a></li>
			<li><a href="#1">协议规则</a></li>
			<li><a href="#1">下载app</a></li>
			<li class="long"><a href="#1">Select Location</a></li>
			<li class="right"><a href="#1">购物车</a></li>
			<li class="right"><a href="#1">消息通知</a></li>
			<li class="right"><a href="#1">注册</a></li>
			<li class="right"><a href="#1">登录</a></li>


		</ul>


		<div>
			<ul class="span">
				<div class="float-left">
					<img src="img/mi-logo.png" width="55px" height="55px" class="red" />
				</div>
				<div class="float-left">
					<span class="float-left"><a style="color: #000000;" href="#1">小米手机</a></span>
					<span class="float-left"><a style="color: #000000;" href="#1">Redmi 红米</a></span>
					<span class="float-left"><a style="color: #000000;" href="#1">电视</a></span>
					<span class="float-left"><a style="color: #000000;" href="#2">笔记本</a></span>
					<span class="float-left"><a style="color: #000000;" href="#1">家电</a></span>
					<span class="float-left"><a style="color: #000000;" href="#1">智能硬件</a></span>
					<span class="float-left"><a style="color: #000000;" href="#1">服务</a></span>
					<span class="float-left"><a style="color: #000000;" href="#1">社区</a></span>
				</div>
				<div class="float-right">
					<input type="search" name="keyword" id="search" autocomplete="off" style="width: 250px; height: 50px;" />
					<input type="submit" value="" class="search-btn iconfont" />
					<button class="btn btn-primary">搜索</button>
				</div>

			</ul>
		</div>







		<div style="width:1226px; height: 460px;">
			<div style="width:970px; height: 460px;" class="float-right">
				<img src="./img/rose.jpg" width="970px" height="460px" />
			</div>
			<div style="width:234px; height: 460px;" class="float-left">
				<img src="img/list.png" width="234px" height="460px" />
			</div>

		</div>
		
		<div>
			<img src="img/a.png" width="228px" height="164px">
			<img src="img/b.jpg"  width="316px" height="170px">
			<img src="img/c.jpg" width="316px" height="170px">
			<img src="img/d.jpg" width="316px" height="170px">
			
		</div>
		
	</body>
</html>
